<template>
	<view class="upload_list">
		<view v-for="(item,index) in imagList" :key="index" class="upload_item">
			<u-image @click="seeInfo(item)" width="152rpx"  height='152rpx' border-radius="20rpx" :src="item"></u-image>
			<view v-if="!disable" class="item_other">
				<view class="item_xian"></view>
				<view @click="del(index)" class="item_del">
					<image style="width: 24rpx; height: 24rpx;margin-right: 16rpx;" src="https://www.mengkahuyu.com/index_png/close.png" ></image>
					<span>删除</span>
				</view>
			</view>
		</view>
		<view v-if="!disable" @click="chooseImage" class="upload_add">
			<image  style="width: 24rpx; height: 24rpx;margin-bottom: 16rpx;" src="https://www.mengkahuyu.com/index_png/add_icon.png"></image>
			<span>上传</span>
		</view>
		
	</view>
</template>

<script>
	import config from "@/config/index.js";
	const {baseUrl , imgUrl} = config;
	export default {
		props: {
			// 缺省图
			imagList:{
				type: Array,
				default: []
			},
			disable:{
				type:Boolean,
				default: false
			}
		},
		data() {
			return {
				show:false,
				see_img:''
			}
		},
		methods: {
			seeInfo(url) {
				if(url){
					uni.showLoading({
						title: '加载中'
					});
					uni.previewImage({
						urls: [url],
						complete: () => {
							uni.hideLoading();
						}
					});
				}
				
			},
			del(index){
				console.log(index , 'xuyaoshanchude1')
				this.imagList.splice(index , 1)
				uni.showModal({
					title: '提示',
					content: '确认删除该照片?',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						if(res.confirm) {  
						   this.$emit('imageChange' , this.imagList)
						} else {}  
					} 
				})
			},
			chooseImage(){
				uni.chooseImage({
					sizeType:'compressed',
					count:1,
					success: (file) => {
						 var tempFilePaths = file.tempFilePaths;
						 uni.showLoading({
						 	title:'上传中',
							mask:true
						 })
						 uni.uploadFile({
						 	url: baseUrl+'index/index/file', // 后端给的接口地址
						 	type: 'POST',
						 	filePath: tempFilePaths[0],// 本地文件地址
						 	name: 'file',// 传给后端时二进制文件的key
						 	header: {
								// #ifdef MP-WEIXIN
									'content-type':'multipart/form-data', // 必须添加
								// #endif
						 	},
						 	success: (res) => {
								uni.hideLoading()
								var url = imgUrl+res.data
								var Urls = url.replace(/\\/g , '/')
								this.imagList.push(Urls)
								this.$emit('imageChange' , this.imagList)
						 	},
						 	fail(err) {
								uni.hideLoading()
								uni.showToast({
									title:'上传失败,请重试!',
									icon:'none'
								})
						 	}
						 }); 
					}
				});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.scss);
</style>